<template>
  <div class="wap-container orderAppraise" id="container">
    <section class="top mt10 mr10 ml10 bgfff">
      <div class="top-title">
        服务评价
      </div>
      <div class="order-info">
        <div class="info-left ml20">
          <ul>
            <li class="rowflex">
              <div class="info-item c666">工单号</div>
              <div>{{orderInfo.code}}</div>
            </li>
            <li class="rowflex">
              <div class="info-item c666">工程师</div>
              <div>{{orderInfo.engineer.nickName}}</div>
            </li>
            <li class="rowflex">
              <div class="info-item c666">服务时间</div>
              <div>{{orderInfo.createdTime}}</div>
            </li>
          </ul>
        </div>
        <div class="info-right">
          <div class="engIcon" v-if="false"><img src="~assets/images/icon_saomiao@2x.png"></div>
        </div>
      </div>
      <div class="order-score">
        <p class="c666">你对本次服务的总体评价</p>
        <div class="star-box">
          <div class="star-item" v-bind:class="{light: Gparam.orderSocre > 0}" @click="orderSocre(1)"></div>
          <div class="star-item" v-bind:class="{light: Gparam.orderSocre > 1}" @click="orderSocre(2)"></div>
          <div class="star-item" v-bind:class="{light: Gparam.orderSocre > 2}" @click="orderSocre(3)"></div>
          <div class="star-item" v-bind:class="{light: Gparam.orderSocre > 3}" @click="orderSocre(4)"></div>
          <div class="star-item" v-bind:class="{light: Gparam.orderSocre > 4}" @click="orderSocre(5)"></div>
        </div>
      </div>
    </section>
    <section class="bottom mt10 mr10 ml10 pb20 bgfff">
      <div class="bottom-title">
        服务反馈
      </div>
      <div class="bottom-content">
        <ul class="appraise-box pl10">
          <li class="apparise-item">
            <div><span>1</span><span class="item-content">您对本公司产品使用的评价</span></div>
            <div class="selects">
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[0] === 4 }" @click="selectType(0,4)">优<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[0] === 3 }" @click="selectType(0,3)">良<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[0] === 2 }" @click="selectType(0,2)">中<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[0] === 1 }" @click="selectType(0,1)">差<div class="mark"></div></div>
            </div>
          </li>
          <li class="apparise-item">
            <div><span>2</span><span class="item-content">您对本公司服务人员态度的评价</span></div>
            <div class="selects">
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[1] === 4 }" @click="selectType(1,4)">优<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[1] === 3 }" @click="selectType(1,3)">良<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[1] === 2 }" @click="selectType(1,2)">中<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[1] === 1 }" @click="selectType(1,1)">差<div class="mark"></div></div>
            </div>
          </li>
          <li class="apparise-item">
            <div><span>3</span><span class="item-content">您对本公司服务人员技术的评价</span></div>
            <div class="selects">
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[2] === 4 }" @click="selectType(2,4)">优<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[2] === 3 }" @click="selectType(2,3)">良<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[2] === 2 }" @click="selectType(2,2)">中<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[2] === 1 }" @click="selectType(2,1)">差<div class="mark"></div></div>
            </div>
          </li>
          <li class="apparise-item">
            <div><span>4</span><span class="item-content">您对本公司服务人员速度的评价</span></div>
            <div class="selects">
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[3] === 4 }" @click="selectType(3,4)">优<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[3] === 3 }" @click="selectType(3,3)">良<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[3] === 2 }" @click="selectType(3,2)">中<div class="mark"></div></div>
              <div class="select-item" v-bind:class="{ typeMark: Gparam.appraise[3] === 1 }" @click="selectType(3,1)">差<div class="mark"></div></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="bottom-suggest mt15 c666">
        您的意见和建议<input class="ml15" type="text" v-model="from.option" placeholder="请填写"/>
      </div>
    </section>
    <section class="bottom_bar cfff" @click="commitAppraise()">
      确认
    </section>
  </div>
</template>

<script>
    export default {
      name: "OrderAppraise",
      data() {
        return{
          Gparam:{
            orderNum: 'YHBN123456',
            enginerrName: '张三',
            orderTime: '2018-5-6 15:30',
            orderSocre: 0, // score=亮几颗星
            appraise: [0,0,0,0], //对应评价一二三四，4=优，3=良...
            orderId: '',
          },
          orderInfo:{
            engineer:{}
          },
          from: {
            level: "",
            mannerEvaluate: "",
            option: "",
            skillEvaluate: "",
            speedEvaluate: "",
            useEvaluate: ""
          }
        }
      },
      methods: {
        orderSocre: function (num) {
          this.Gparam.orderSocre = num
          this.from.level = '' + num
        },
        selectType: function (a,b) {
          this.$set(this.Gparam.appraise, a, b)
          this.from.useEvaluate = ''+ this.Gparam.appraise[0]
          this.from.mannerEvaluate = ''+ this.Gparam.appraise[1]
          this.from.skillEvaluate = ''+ this.Gparam.appraise[2]
          this.from.speedEvaluate = ''+ this.Gparam.appraise[3]
        },
        commitAppraise: function() {
          let data = this.from
          if (data.level == ""){
            this.$vux.toast.show({
              content: '请选择总体评价星级'
            })
            return false
          }
          this.$http.post('/work/api/workorder/'+this.Gparam.orderId+'/evaluate',data).then(res=>{
              this.$router.push({path: '/user/repairSuccess',query: {type: 'evaluate'}})
            }
          )
        },
        jumpPage: function (url) {
          window.location.href = url
        },
      },
      mounted(){
        let id = this.$route.query.orderId
        this.Gparam.orderId = id
        console.log(id)
        this.$http.get('/work/api/workorder/'+id).then(res=>{
            console.log(res)
            this.orderInfo = res.data.data
          }
        )
      },
    }
</script>

<style lang="less">
  .orderAppraise {
    font-size: 0.13rem;

    .top, .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .top-title, .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .order-info {
      font-size: 0.15rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 1px #ebebeb;
    }
    .info-left {
      padding-bottom: 0.15rem;
    }
    .info-left ul li {
      margin-top: 0.13rem;
    }
    .info-item {
      margin-right: 0.15rem;
    }
    .info-right {

    }
    .engIcon {
      width: 0.64rem;
      height: 0.64rem;
      border-radius: 100%;
      margin-right: 0.1rem;
      overflow: hidden;
    }
    .engIcon img {
      width: 0.64rem;
      height: 0.64rem;
    }
    .order-score {
      margin-top: 0.13rem;
      text-align: center;
    }
    .star-box {
      display: flex;
      justify-content: center;
      margin-top: 0.1rem;
      padding-bottom: 0.15rem;
    }
    .star-box .star-item {
      width: 0.19rem;
      height: 0.19rem;
      background: url("~assets/images/icon_xingxing_nol@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
      margin-right: 0.15rem;
    }
    .star-item:last-child {
      margin-right: 0;
    }
    .star-box .light.star-item {
      background-image: url("~assets/images/icon_xingxing_sel@2x.png") !important;
    }
    .bottom-content {
      font-size: 0.15rem;
    }
    .appraise-box {
      padding-bottom: 0.15rem;
      border-bottom: solid 1px #ebebeb;
    }
    ul .apparise-item {
      margin-top: 0.15rem;
    }
    .item-content {
      margin-left: 0.15rem;
    }
    .selects {
      display: flex;
      font-size: 0.13rem;
      color: #999;
      margin-top: 0.1rem;
      height: 0.16rem;
      line-height: 0.16rem;
    }
    .select-item {
      display: flex;
      margin-left: 0.3rem;
    }
    .select-item:first-child {
      margin-left: 0.25rem;
    }
    .mark {
      width: 0.16rem;
      height: 0.16rem;
      margin: 0 0 0 0.05rem;
      background: url("~assets/images/icon_nol@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .typeMark .mark {
      background: url("~assets/images/icon_sel@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }

    .bottom-suggest {
      height: 0.25rem;
      line-height: 0.25rem;
      font-size: 0.15rem;
      padding: 0 0.1rem;
    }
    .bottom-suggest input {
      width: 2.15rem;
      -webkit-border-radius: 0.02rem;
      -moz-border-radius: 0.02rem;
      border-radius: 0.02rem;
      border: 1px solid #dfdfdf;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
